<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form ref="form" :model="form" :inline="true" style="text-align: left;height: 38px">
          <el-form-item label="关键字">
            <el-input v-model="form.filter.kwd" style="float: left;" placeholder="请输入关键字查询"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form.filter.fieldList[0].val">
              <el-option label="全部" value=""></el-option>
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地区">
            <v-distpicker @selected="areaSelected"></v-distpicker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="float: left;" @click.native="onSubmit"><i class="el-icon-search"></i>查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table stripe
              v-loading="loading"
              element-loading-text="数据加载中"
              :data="page.list"
              style="width:100%"
              @sort-change="onSubmit"
              border>
      <el-table-column
        inline-template
        fixed
        label="序号"
        width="80px"
        align="center">
        <span>{{$index + 1 + ((page.pageNumber - 1) * page.pageSize)}}</span>
      </el-table-column>
      <el-table-column
        label="姓名"
        property="name"
        sortable="custom"
        width="100px"
        align="center">
      </el-table-column>
      <el-table-column
        property="sex"
        sortable="custom"
        label="性别"
        width="100px">
      </el-table-column>
      <el-table-column
        property="cardid"
        sortable="custom"
        label="身份证号"
        width="200px">
      </el-table-column>
      <el-table-column
        label="年龄"
        inline-template
      >
        <template>
          {{new Date().getYear() -new Number(row.cardid.substring(6,10))+1900}}
        </template>
      </el-table-column>
      <el-table-column
        property="sucCount"
        sortable="custom"
        label="筛选成功次数"
        width="200px"
        align="center">
      </el-table-column>
      <el-table-column
        property="complianceScore"
        sortable="custom"
        label="依从性平均分"
        width="200px"
        align="center">
      </el-table-column>
      <el-table-column
        property="lastFlupDate"
        sortable="custom"
        label="最后访视日期"
        width="200px"
        align="center">
      </el-table-column>
      <el-table-column
        property="province"
        sortable="custom"
        label="省份"
        width="200px"
        align="center">
      </el-table-column>
      <el-table-column
        property="city"
        sortable="custom"
        label="地市"
        width="200px"
        align="center">
      </el-table-column>
      <el-table-column
        property="county"
        sortable="custom"
        label="区县"
        width="200px"
        align="center">
      </el-table-column>
      <el-table-column
        inline-template
        label="操作"
        fixed="right"
        align="center"
        width="80px">
        <template>
          <el-button type="text" @click.native="openProjectListDialog(row)" key="view">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNumber"
        :page-sizes="[10, 20, 30]"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="page.totalRow">
      </el-pagination>
    </div>

    <project-list-dialog :projectDialogVisible="dialogData.show" :name="name" :cardid="cardid"></project-list-dialog>
  </div>
</template>
<script>
  import http from '../../../api/http'
  import ProjectListDialog from "./projectList.dialog.vue"
  import VDistpicker from '../../../components/v-distpicker'

  export default {
    data() {
      var model = {testStatus: 0};
      return {
        loading: true,
        form: {
          filter: {
            kwd: '',
            sort: {},
            fieldList: [{field: 'sex', exp: '=', val: ''}, {field: 'province', exp: '=', val: ''}, {
              field: 'city',
              exp: '=',
              val: ''
            }, {field: 'county', exp: '=', val: ''}]
          },
          pageNo: 1,
          pageSize: 10
        },
        dialogData: {show: false},
        cardid: '',
        name: '',
        page: {}
      }
    },
    computed: {},
    methods: {
      areaSelected(val) {
        if (val.province.code != undefined && val.province.code != '') {
          this.form.filter.fieldList[1].val = val.province.value;
        } else {
          this.form.filter.fieldList[1].val ="";
        }
        if (val.city.code != undefined && val.city.code != '') {
          this.form.filter.fieldList[2].val = val.city.value;
        } else {
          this.form.filter.fieldList[2].val="";
        }
        if (val.area.code != undefined && val.area.code != '') {
          this.form.filter.fieldList[3].val = val.area.value;
        } else {
          this.form.filter.fieldList[3].val="";
        }
      },
      openProjectListDialog(row) {
        this.dialogData.show = true;
        this.cardid = row.cardid;
        this.name = row.name;
      },
      closeProjectListDialog() {
        this.dialogData.show = false;
        this.cardid = "";
        this.name = "";
      },
      onSubmit(sortCol) {
        var vm = this;
        if (sortCol && sortCol.prop != undefined && sortCol.prop != '' && sortCol.prop != 'undefined') {
          var sortJson = '{"' + sortCol.prop + '":"' + (sortCol.order == 'descending' ? 'desc' : 'asc') + '"}';
          vm.form.filter.sort = JSON.parse(sortJson);
          vm.form.pageNo = 1;
        }
        vm.loading = true;
        http.postData(vm, "/pt/subjects/poolPage/", {
          json: JSON.stringify(vm.form.filter),
          pageNo: vm.form.pageNo,
          pageSize: vm.form.pageSize,
        }, function (resp) {
          var ret = resp.body;
          if (ret.code == '111') {
            vm.page = ret.value;
          }
          vm.loading = false;
        });
      },
      handleSizeChange() {
        this.form.pageNo = 1
        this.onSubmit()
      },
      handleCurrentChange(val) {
        this.form.pageNo = val
        this.onSubmit()
      }
    },
    components: {
      ProjectListDialog, VDistpicker
    },
    created() {
      this.onSubmit();
      var vm = this;
    }
  }

</script>
<style>
</style>
